<template>
    <div>
        <el-dialog :visible.sync="dialogVisible" :title="title" width="800px">
            <el-form :model="form" label-width="150px" label-position="center" inline>
                <div style="display: flex;">
                    <div class="column">
                        <el-form-item label="用户名：" class="required-label">
                            <el-input class="input-btn" v-model="form.name"></el-input>
                        </el-form-item>
                        <el-form-item label="电话号码：">
                            <el-input class="input-btn" v-model="form.phone"></el-input>
                        </el-form-item>
                        <el-form-item label="性别：">
                            <el-input class="input-btn" v-model="form.sex"></el-input>
                        </el-form-item>
                        <el-form-item label="地址：">
                            <el-input class="input-btn" v-model="form.address"></el-input>
                        </el-form-item>
                        <el-form-item label="邮箱：">
                            <el-input class="input-btn" v-model="form.email"></el-input>
                        </el-form-item>
                    </div>
                    <div class="column">
                        <el-form-item label="密码：" class="required-label">
                            <el-input class="input-btn" v-model="form.password" type="password"></el-input>
                        </el-form-item>
                        <el-form-item label="部门：">
                            <el-input class="input-btn" v-model="form.dept"></el-input>
                        </el-form-item>
                        <el-form-item label="角色：">
                            <el-select class="input-btn" v-model="form.role" clearable>
                                <el-option v-for="item in roleList" :key="item.id" :value="item.value"
                                    :label="item.value"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="状态：" class="required-label">
                            <el-select class="input-btn" v-model="form.status" clearable>
                                <el-option v-for="item in statusList" :key="item.id" :value="item.value"
                                    :label="item.label"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="备注：">
                            <el-input class="input-btn" v-model="form.remark"></el-input>
                        </el-form-item>
                    </div>
                </div>
                <div class="btn-box">
                    <el-button @click="confirm" type="primary">确定</el-button>
                    <el-button @click="cancel" type="default">返回</el-button>
                </div>

            </el-form>
        </el-dialog>
    </div>
</template>

<script>
import { addUsers, editUser } from '../../../api/user/userInfo';
export default {
    data() {
        return {
            dialogVisible: false,
            type: '',
            title: '',
            form: {
                name: '',
                phone: '',
                sex: '',
                address: '',
                email: '',
                password: '',
                dept: '',
                role: '',
                status: '',
                remark: '',
            },
            statusList: [
                { id: 0, label: '正常', value: 1 },
                { id: 1, label: '禁用', value: 0 }
            ],
            roleList: [
                { id: 0, value: '超级管理员' },
                { id: 1, value: '普通用户' }
            ]
        }
    },
    methods: {
        init(data) {
            const { type, row } = data
            this.dialogVisible = true
            this.type = type
            if (type == 'add') {
                this.title = '添加用户'
                // 新增时清空表单数据
                this.form = {
                    name: '',
                    phone: '',
                    sex: '',
                    address: '',
                    email: '',
                    password: '',
                    dept: '',
                    role: '',
                    status: '',
                    remark: '',
                    password: ''
                }
            }
            if (type == 'edit') {
                this.form.id = row.id
                this.title = '编辑用户'
                this.form.name = row.name
                this.form.phone = row.phone
                this.form.sex = row.sex
                this.form.address = row.address
                this.form.email = row.email
                this.form.dept = row.dept
                this.form.role = row.role
                this.form.status = row.status
                this.form.remark = row.remark
                this.form.password = row.password
            }
        },
        async confirm() {
            if (this.form.name === '') {
                this.$message({
                    message: '用户名不能为空',
                    type: 'error'
                })
                return
            }
            if (this.form.password === '') {
                this.$message({
                    message: '密码不能为空',
                    type: 'error'
                })
                return
            }
            if (this.form.status === '') {
                this.$message({
                    message: '请选择用户状态',
                    type: 'error'
                })
                return
            }
            console.log(this.form, '提交时的form');
            if (this.type == 'add') {
                let res = await addUsers(this.form)
                if (res.code == 200) {
                    this.$message({
                        message: '添加成功',
                        type: 'success'
                    })
                    this.$emit('refresh')
                    this.dialogVisible = false
                } else {
                    this.$message({
                        message: res.msg,
                        type: 'error'
                    })
                    this.dialogVisible = false

                }
            }
            if (this.type == 'edit') {
                let res = await editUser(this.form)
                if (res.code == 200) {
                    this.$message({
                        message: '编辑成功',
                        type: 'success'
                    })
                    this.$emit('refresh')
                    this.dialogVisible = false
                } else {
                    this.$message({
                        message: res.msg,
                        type: 'error'
                    })
                }
                this.dialogVisible = false

            }
            this.dialogVisible = false
        },
        cancel() {
            this.dialogVisible = false
        }

    }
}
</script>
<style lang='scss' scoped>
.column {
    display: flex;
    flex-direction: column;
}

.input-btn {
    width: 200px;
}

.required-label {
    position: relative;
}

.required-label::before {
    position: absolute;
    content: '*';
    color: red;
    top: 7px;
    left: 45px;
}

.btn-box {
    width: 100%;
    display: flex;
    justify-content: flex-end;
    margin-top: 35px;
    padding-right: 50px;
    box-sizing: border-box;
}
</style>
